<!DOCTYPE html>
<!--
  ~ Copyright (C) 2018 guomw.Inc. All rights reserved.
  ~ 项目名称： mysite
  ~ 文件名称： menus.html
  ~ Date：18-9-17 下午5:21
  ~ Author: guomw
  -->

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/head :: head('菜单管理')"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>系统菜单管理</h5>
                </div>
                <div class="ibox-content">

                    <div class="dd" id="nestable2">
                        <ol class="dd-list">
                            <li class="dd-item" data-id="0">
                                <!--<button class="expand-collapse expand-collapse-collapse" data-action="collapse"-->
                                <!--type="button" style="display: block;">关闭-->
                                <!--</button>-->
                                <!--<button class="expand-collapse expand-collapse-expand" data-action="expand"-->
                                <!--type="button" style="display: none;">展开-->
                                <!--</button>-->
                                <div class="dd-handle">
                                    <span class="label label-info"><i class="fa fa-home"></i></span> 根节点
                                </div>
                                <div class="btn-a-items">
                                    <div class="btn-content header">
                                        <span>菜单地址</span>
                                        <span>排序值</span>
                                        <span>是否启用</span>
                                        <span>菜单样式</span>
                                    </div>
                                    <div class="btn-right">
                                        <a type="button" class="btn-a" data-toggle="modal" data-target="#addMenuModal"
                                           onclick="edit(0,0);">添加子菜单</a>
                                    </div>
                                </div>
                                <div id="menulist"></div>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="menus_template">
    <ol class="dd-list">
        <li class="dd-item" data-id="{itemCode}">
            {collapse_expand}
            <div class="dd-handle">
                <span class="label label-info">{iconClsDom}</span>{itemName}
                <span class="label label-danger pull-left">{itemFunction}</span>
            </div>
            <div class="btn-a-items">
                <div class="btn-content">
                    <span>{itemPath}</span>
                    <span>{itemSort}</span>
                    <span style="color: red;">{itemEnable}</span>
                    <span style="color: #00067c;">{itemIconCls}</span>
                </div>
                <div class="btn-right">
                    {btnItems}
                </div>
            </div>
            {childMenus}
        </li>
    </ol>
</script>
<script type="text/html" id="menus_btn_template">
    <a type="button" class="btn-a" data-toggle="modal" data-target="{target}" onclick="{clickMethod}">{title}</a>
</script>
<!--添加管理员模态窗-->
<modal th:include="/template/modal::addMenuModal"></modal>
<footer th:include="/common/footer::js"/>
<script>
    var isFunctionMenu = false;
    $(document).ready(function () {
        initData();
        $(".i-checks").iCheck({
            checkboxClass: "icheckbox_square-green",
            radioClass: "iradio_square-green",
        });
        $('.i-checks').on('ifChecked', function (event) {
            isFunctionMenu = true;
        });
        $('.i-checks').on('ifUnchecked', function (event) {
            isFunctionMenu = false;
        });
    });

    function expand(obj) {
        $(obj).parent().children(".dd-list").show();
        $(obj).parent().children("button").show();
        $(obj).hide();
    }

    function collapse(obj) {
        $(obj).parent().children(".dd-list").hide();
        $(obj).parent().children("button").show();
        $(obj).hide();

    }

    /**
     * 提交
     * @returns {boolean}
     */
    function btnSubmit() {
        if (hotUtil.isNullOrEmpty($("#itemName").val())) {
            swal("请输入菜单名称", "", "warning")
            $("#itemName").focus();
            return false;
        }
        if ($.trim($("#itemSort").val()).length == 0) {
            $("#itemSort").val(99);
        }
        if (hotUtil.isNullOrEmpty($("#itemPath").val())) {
            swal("请输入菜单路径", "", "error")
            $("#itemPath").focus();
            return false;
        }
        hotUtil.loading.show();
        hotUtil.ajaxCall("ajax/save", {
            itemParentCode: parseInt($.trim($("#itemParentCode").val())),
            itemName: $.trim($("#itemName").val()),
            itemSort: parseInt($.trim($("#itemSort").val())),
            itemPath: $.trim($("#itemPath").val()),
            itemIconCls: $.trim($("#itemIconCls").val()),
            itemCode: $.trim($("#itemCode").val()),
            itemFunction: isFunctionMenu
        }, function (ret) {
            hotUtil.loading.close();
            if (ret.resultCode === 1) {
                initData();
                swal(ret.resultMsg, "", "success");
                $('#addMenuModal').modal('hide');
            }
            else {
                swal(ret.resultMsg, "", "error")
            }
        });
    }


    /**菜单加载*/
    var menusliTemplate = $("#menus_template").html();
    var menusbtnTemplate = $("#menus_btn_template").html();
    var menuListProvider = {
        menuList: [],
        getChildMenu: function (itemParentCode) {
            var resultList = [];
            $.each(this.menuList, function (o, item) {
                if (item.itemParentCode === itemParentCode) {
                    resultList.push(item);
                }
            });
            return resultList;
        },
        getMenu: function (itemCode) {
            var result = {};
            $.each(this.menuList, function (o, item) {
                if (item.itemCode === itemCode) {
                    result = item;
                    return;
                }
            });
            return result;
        }
    };

    /**
     * 加载数据
     */
    function initData() {
        hotUtil.loading.show();
        hotUtil.ajaxCall("ajax/list", null, function (ret) {
            hotUtil.loading.close();
            if (ret.resultCode === 1) {
                menuListProvider.menuList = ret.data;
                var appendHtml = outputChild(0);
                $("#menulist").html(appendHtml);
            }
        });
    }

    /**
     * 递归输出菜单
     */
    function outputChild(itemParentCode) {
        var data = menuListProvider.getChildMenu(itemParentCode);
        var appendHtml = "";
        $.each(data, function (o, item) {
            var tempHtml = menusliTemplate;
            var btnTempHtml = "";
            tempHtml = tempHtml.replace(/{itemName}/gm, item.itemName);
            tempHtml = tempHtml.replace(/{itemCode}/gm, item.itemCode);
            tempHtml = tempHtml.replace(/{itemParentCode}/gm, item.itemParentCode);
            if (!item.itemFunction) {
                btnTempHtml += menusbtnTemplate.replace("{clickMethod}", "edit(" + item.itemCode + ",0)").replace("{title}", "添加子菜单").replace(/{target}/gm, "#addMenuModal");
                btnTempHtml += menusbtnTemplate.replace("{clickMethod}", "setEnable(" + item.itemCode + ")").replace("{title}", item.itemEnable ? "禁用" : "启用").replace(/{target}/gm, "");
                tempHtml = tempHtml.replace(/{itemSort}/gm, item.itemSort);
                tempHtml = tempHtml.replace(/{itemPath}/gm, item.itemPath);
                tempHtml = tempHtml.replace(/{itemEnable}/gm, item.itemEnable ? "启用" : "禁用");
                tempHtml = tempHtml.replace(/{iconClsDom}/gm, hotUtil.isNullOrEmpty(item.itemIconCls) ? "" : "<i class=\"fa fa-" + item.itemIconCls + "\"></i>");
            }
            else {
                tempHtml = tempHtml.replace(/{itemSort}/gm, "");
                tempHtml = tempHtml.replace(/{itemPath}/gm, "");
                tempHtml = tempHtml.replace(/{itemEnable}/gm, "");
                tempHtml = tempHtml.replace(/{iconClsDom}/gm, "");
            }

            tempHtml = tempHtml.replace(/{itemIconCls}/gm, item.itemIconCls);
            tempHtml = tempHtml.replace(/{itemFunction}/gm, item.itemFunction ? "功能" : "");

            btnTempHtml += menusbtnTemplate.replace("{clickMethod}", "edit(" + item.itemCode + ",1)").replace("{title}", "编辑").replace(/{target}/gm, "#addMenuModal");

            var itemChildCount = item.itemChildCount;
            if (itemChildCount > 0) {
                tempHtml = tempHtml.replace(/{childMenus}/, outputChild(item.itemCode));
                tempHtml = tempHtml.replace(/{collapse_expand}/, "<button class='" + (item.itemFunction ? "itemFunction" : "") + "' onclick=\"collapse(this)\" data-action=\"collapse\" type=\"button\" style=\"display: block;\">关闭</button><button onclick=\"expand(this)\" data-action=\"expand\" type=\"button\" style=\"display: none;\">展开</button>");
            }
            else {
                tempHtml = tempHtml.replace(/{childMenus}/, "");
                tempHtml = tempHtml.replace(/{collapse_expand}/, "");
            }
            tempHtml = tempHtml.replace(/{btnItems}/, btnTempHtml);
            appendHtml += tempHtml;
        });
        return appendHtml;
    }

    /**
     * 添加或编辑菜单
     * @param pid
     * @param type
     */
    function edit(pid, type) {
        var data = type == 1 ? menuListProvider.getMenu(pid) : null;
        $("#itemParentCode").val(pid);
        isFunctionMenu = false;
        $("#itemFunction").show();
        if (data) {
            $(".modal-title").text("编辑菜单");
            $("#itemCode").val(data.itemCode);
            $("#itemParentCode").val(data.itemParentCode);
            $("#itemName").val(data.itemName);
            $("#itemPath").val(data.itemPath);
            $("#itemSort").val(data.itemSort);
            $("#itemIconCls").val(data.itemIconCls);
            isFunctionMenu = data.itemFunction;
            $("#itemFunction").hide();
        }
        else {
            $(".modal-title").text("添加菜单");
            $("#itemCode").val(0);
            $("#itemName").val("");
            $("#itemPath").val("");
            $("#itemSort").val(99);
            $("#itemIconCls").val("");
            $("#i-checks-itemFunction").iCheck('uncheck');
        }
        $("#i-checks-itemFunction").iCheck(isFunctionMenu ? 'check' : "uncheck");
    }

    /***
     * 设置菜单禁用和启用
     * @param itenCode
     */
    function setEnable(itemCode) {
        hotUtil.loading.show();
        hotUtil.ajaxCall("ajax/activate", {
            itemCode: itemCode
        }, function (ret) {
            hotUtil.loading.close();
            if (ret.resultCode === 1) {
                initData();
            }
            else {
                swal(ret.resultMsg, "", "error")
            }
        });
    }

    /**
     * 删除菜单
     * @param itemCode
     */
    function deleteItem(itemCode) {
        swal({
            title: "您确定要删除这条信息吗",
            text: "删除后将无法恢复，请谨慎操作！",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "删除",
            closeOnConfirm: false
        }, function () {
            hotUtil.loading.show();
            hotUtil.ajaxCall("delete", {
                itemCode: itemCode
            }, function (ret) {
                hotUtil.loading.close();
                if (ret.resultCode === 1) {
                    initData();
                    swal("删除成功！", "您已经永久删除了这条信息。", "success");
                }
                else {
                    swal("删除失败！", ret.resultMsg, "error");
                }
            });
        });
    }

</script>
</body>
</html>